<template>
  <div class="fxBox">
    <div class="fxBox__top">
      <el-radio-group v-model="chooseRadio" @change="selectRadio">
        <el-radio label="0">不使用返利</el-radio>
        <el-radio label="1">固定金额</el-radio>
        <el-radio label="2">百分比</el-radio>
        <el-radio label="3">统一设置</el-radio>
      </el-radio-group>
      <div class="fxBox__top--tip">
        不使用返利即该商品不参与，设置后启用单品返利，前往
        <el-button type="text" @click="jumpLocation">返利设置</el-button>配置
      </div>
    </div>
    <div class="fxBox__list" v-if="chooseRadio === '1' || chooseRadio === '2'" :style="{
        height: reList.skuStocks.length > 1 ? '400px' : '140px',
      }">
      <div class="fxBox__list--firLine">
        <div class="vipItem" v-if="reList.skuStocks.length > 1">规格值</div>
        <div class="vipItem">实售价</div>
        <div class="vipItem">指导价</div>
        <div class="vipItem">返利金额</div>
      </div>
      <div class="fxBox__list--skuLine" :style="{ height: reList.skuStocks.length > 4 ? '273px' : '' }">
        <div v-for="(v, i) in reList.skuStocks" :key="i">
          <div v-for="(item, index) in v.skuRebates" :key="index" class="skuLine" :style="{
              borderBottom:
                reList.skuStocks.length > 1 ? '1px solid #ebedf1' : 'none',
            }">
            <div class="skuLine__name" v-if="reList.skuStocks.length > 1">
              {{ v.specs }}
            </div>
            <div class="skuLine__center" style="width: 70px">
              ￥{{ v.price }}
            </div>
            <div class="skuLine__center" style="width: 180px">
              ￥{{ v.originalPrice }}
            </div>
            <el-input-number :min="0" :controls="false" v-model="item.rebatePrice"
              style="width: 125px; margin: 0px 13px">
              <div slot="append">{{ chooseRadio === "1" ? "元" : "%" }}</div>
            </el-input-number>
          </div>
        </div>
      </div>
      <div class="fxBox__list--firLine" v-if="reList.skuStocks.length > 1" style="
          padding-right: 20px;
          margin-top: 20px;
          position: absolute;
          left: 0px;
          bottom: 0px;
        ">
        <div style="display: flex; width: 353px; align-items: center">
          <div style="margin-right: 10px">批量设置</div>
          <el-switch v-model="setValue" active-color="#006EFF" inactive-color="#D7D7D7" @change="control"></el-switch>
        </div>
        <el-input-number :min="0" :controls="false" v-model="rebatePrice" style="width: 125px; margin: 0px 13px"
          @blur="setByAll($event)">
          <div slot="append">{{ chooseRadio === "1" ? "元" : "%" }}</div>
        </el-input-number>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
//#endregion
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class Distribution extends Vue {
  @Prop()
  currentGood: any;

  @Prop()
  rebatesFlag: any;

  reList = {} as any;

  chooseRadio = "0";

  setValue = false;

  /** 批量设置返利金额 */
  rebatePrice = "";

  @Watch("rebatesFlag")
  rebatesFlagChange() {
    if (this.rebatesFlag) {
      this.setValue = false;
      this.rebatePrice = "";
      this.init();
    }
  }

  mounted() {
    this.init();
  }

  init() {
    this.reList = JSON.parse(JSON.stringify(this.currentGood));
    const reList = this.reList;
    reList.skuStocks.forEach((skuItem) => {
      if (skuItem.skuRebates.length === 0) {
        this.chooseRadio = String(skuItem.rebateType);
        skuItem.skuRebates = [];
        skuItem.skuRebates.push({
          rebatePrice: null,
          productId: reList.id,
          skuId: skuItem.id,
        });
      } else {
        this.chooseRadio = String(reList.skuStocks[0].rebateType);
      }
    });
  }

  /**
   * 批量设置开关
   */
  control() {
    this.reList.skuStocks.forEach((item) => {
      item.skuRebates[0].rebatePrice = null;
    });
  }

  /**
   * 批量设置
   */
  setByAll(e) {
    if (!this.setValue) {
      return;
    }
    this.reList.skuStocks.forEach((skuItem) => {
      skuItem.skuRebates[0].rebatePrice = e.target.value;
    });
  }

  jumpLocation() {
    this.$router.push({ name: "setting", params: { options: "1" } });
  }

  /**
   * 顶部切换使用方式
   */
  selectRadio() {
    this.reList.skuStocks.forEach((item) => {
      item.skuRebates.forEach((skuItem) => {
        skuItem.rebatePrice = null;
      });
    });
  }
}
</script>

<style lang="scss" scoped>
@include b(fxBox) {
  margin-top: 0px;
  @include e(top) {
    display: flex;
    align-items: center;
    @include m(tip) {
      font-size: 12px;
      margin-left: 40px;
      color: #aeaeae;
    }
  }

  @include e(list) {
    margin-top: 20px;
    height: 400px;
    border: 1px solid #ebedf1;
    width: 834px;
    overflow-x: auto;
    display: -webkit-box;
    position: relative;

    @include m(firLine) {
      height: 50px;
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 25px;
      padding-right: 30px;
      background-color: #f2f4f7;
      @include m(vip) {
        width: 450px;
        display: flex;
      }
      .vipItem {
        margin-right: 46px;
        width: 80px;
        display: flex;
      }
    }

    @include m(skuLine) {
      position: absolute;
      top: 55px;
      left: 0px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      // width: 100%;
      overflow: auto;

      .skuLine {
        display: flex;
        align-items: center;
        // margin-bottom: 20px;
        // padding-bottom: 20px;
        border-bottom: 1px solid #ebedf1;
        padding-right: 33px;
        height: 70px;
        width: 100%;

        &__name {
          width: 130px;
          display: flex;
          justify-content: flex-start;
          padding-left: 25px;
        }

        &__center {
          display: flex;
          justify-content: center;
        }
      }

      .vipLine {
        display: flex;
        width: 150px;
        justify-content: center;
      }
    }
  }
}
.fxBox__list--skuLine::-webkit-scrollbar {
  display: none;
}
// .fxBox__list--firLine--vip::-webkit-scrollbar {
//   // display: none;
//   height: 2px;
//   padding-top: 5px;
// }
</style>
